<template>
    <div id="sendBack">
       <!-- 搜索栏 -->
       <el-card id="search">
            <el-row>
                <el-col :span="20">
                    <el-input v-model="searchModel.name" placeholder="姓名"  clearable style="width: 200px;" class="filter-item"></el-input> <!-- style="width: 200px;" class="filter-item"   换行否 -->
                     <el-button @click="getsendBackList()" type="primary" round   icon="el-icon-search">查询</el-button>
                </el-col>
                <el-col :span="3"> <!-- span  3  左右位置 -->
                   <el-button @click="openEditUI(null)" type="primary" icon="el-icon-plus" circle></el-button>
                </el-col>
                <!-- <el-button type="primary"  class="butT" @click="handleCreate()">新建</el-button> -->
                        <!-- 上传文件 -->
                       <el-button type="primary" @click="downloadTemplate()">模板下载</el-button>
                            <el-upload action="/sendBack/upload2"
                                           name="excelFile"
                                           :show-file-list="false"
                                           :on-success="handleSuccess"
                                           :before-upload="beforeUpload">
                            <el-button type="primary" slot="trigger" >上传文件</el-button>
                            </el-upload>
                        <!-- 上传文件 -->
            </el-row>
        </el-card>

         <!-- --------------------------------------------结果列表 --------------------------------->
         <el-card>
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
            <el-table-column  label="序号">
            <template v-slot="scope">
                {{ (searchModel.pageNo-1)*searchModel.pageSize + scope.$index + 1 }}
            </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名"width="200" ></el-table-column>
            <el-table-column prop="sex" label="性别" width="260">
                <template slot-scope="scope"><span>{{ scope.row.sex == '男' ? '男' : '女'}}</span></template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" ></el-table-column>
            <el-table-column prop="address" label="住址" ></el-table-column>
            <el-table-column prop="senddate" label="日期" ></el-table-column>
            <el-table-column prop="sendprice" label="送" ></el-table-column>
            <el-table-column prop="backdate" label="还" ></el-table-column>
            <el-table-column prop="remark" label="说明" ></el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="openEditUI(scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
        </el-card>
        <!-- --------------------------------------------结果列表 --------------------------------->
       


      <!--分页组件 -->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchModel.pageNo"
        :page-sizes="[5,10,20,50]"
        :page-size="searchModel.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
         <!--分页组件 -->
         <!-- 新增标签弹层 -->
       
        <el-dialog title="新增" :visible.sync="dialogFormVisible">
                                        <el-form ref="sendFormRef" :model="formData"  :rules="rules" label-position="right" label-width="100px">
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="姓名">
                                                        <el-input v-model="formData.name"/>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="性别">
                                                        <el-select v-model="formData.sex">
                                                            <el-option label="男" value="男"></el-option>
                                                            <el-option label="女" value="女"></el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="年龄">
                                                        <el-input v-model="formData.age"/>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="住址">
                                                        <el-input v-model="formData.address"/>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="送日期">
                                                        <el-input v-model="formData.senddate" type="date"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="送">
                                                        <el-input v-model="formData.sendprice" ></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="还日期">
                                                        <el-input v-model="formData.backdate" type="date"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="还">
                                                        <el-input v-model="formData.backprice"/>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="24">
                                                    <el-form-item label="上传图片">
                                                        <el-upload
                                                                class="avatar-uploader"
                                                                action="/sendBack/upload"
                                                                :auto-upload="autoUpload"
                                                                name="imgFile"
                                                                :show-file-list="false"
                                                                :on-success="handleAvatarSuccess"
                                                                :before-upload="beforeAvatarUpload">
                                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                        </el-upload>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="24">
                                                    <el-form-item label="说明">
                                                        <el-input v-model="formData.remark" type="textarea"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </el-form>        
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="handleAdd()">确定</el-button>
                            </div>
                        </el-dialog> 
                
        <!---------------- 新增标签弹层-------------------- -->     
    </div>
</template>

<script>
// 导入接口
import financeAPI from '@/api/finance'

export  default{
    data() {
            return {
                autoUpload:true,//自动上传
                dialogFormVisible: false,//添加表单是否可见
                dialogFormVisible4Edit:false,//编辑表单是否可见
                imageUrl:null,//模型数据，用于上传图片完成后图片预览
                uploadUrl: '', // 用于存储完整的上传URL
                activeName:'first',//添加/编辑窗口Tab标签名称
                formData: {},//表单数据
                total: 0,
                searchModel:{
                    pageNo: 1,
                    pageSize: 10
                },
              
                dataList: [],  //当前页要展示的列表数据
                rules: {   // 校验规则
                roleName: [{ required: true, message: '角色为必填项', trigger: 'blur' }],
                roleDesc: [{ required: true, message: '角色描述为必填项', trigger: 'blur' }]
                }
            }

        },
        methods:{
            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            handleAvatarSuccess(res, file) {
                    console.log(res);
                    this.imageUrl = "D:\\java\\"+res.data.data;
                    this.$message({
                        message: res.message,
                        type: res.flag ? 'success' : 'error'
                    });
                },
                //上传图片之前执行
            beforeAvatarUpload(file) {
				  const isJPG = file.type === 'image/jpeg';
                   // const isPNG = file.type === 'image/png';
				  const isLt2M = file.size / 1024 / 1024 < 2;
				  if (!isJPG ){
					this.$message.error('上传套餐图片只能是 JPG 格式!');
				  }
				  if (!isLt2M) {
					this.$message.error('上传套餐图片大小不能超过 2MB!');
				  }
				  return isJPG && isLt2M;
                },

                //上传之前进行文件格式校验
            beforeUpload(file){
                    const isXLS = file.type === 'application/vnd.ms-excel';
                    if(isXLS){
                        return true;
                    }
                    const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                    if (isXLSX) {
                        return true;
                    }
                    this.$message.error('上传文件只能是xls或者xlsx格式!');
                    return false;
                    
                },
            // 文件上传成功后的处理
             //上传成功提示
             handleSuccess(response, file) {
                    if(response.flag){
                        this.$message({
                            message: response.message,
                            type: 'success'
                        });
                    }else{
                        this.$message.error(response.message);
                    }
                    console.log(response, file, fileList);
                },
            // 文件上传失败的处理
            handleError(error, file, fileList) {
            this.$message.error('文件上传失败: ' + error.message);
            },
            // 文件上传前的处理
            handleBeforeUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传文件大小不能超过 2MB!');
            }
            return isLt2M;
            },
            // 文件上传时的处理
            handleProgress(event, file, fileList) {
                
          
            },

           //添加    -- this.$refs.sendFormRef.validate((valid)=>{ ---数据验证
           handleAdd() {
                //触发表单验证
                this.$refs.sendFormRef.validate((valid)=>{ 
                    if(valid){
                        // 提交请求给后台
                        financeAPI.savesendBack(this.formData).then(response =>{
                        // 成功提示
                        this.$message.success(response.msg);
                        //this.$message({
                        //message:response.msg,
                        //type: 'success'
                       // });
                      //修改成功关闭窗口   false
                        this.dialogFormVisible = false;   
                        this.clearForm();
                        // 刷新表格
                        this.getsendBackList();
                        })
                    }else{
                        console.log("error submit!!");
                        return false;
                    }
                
                });
            },
            // 删除
            handleDelete(sendBack) {
                this.$confirm("次操作永久删除，是否继续？", "提示", {   //confirm  防手抖
                    type: "info"
                }).then(() => {
                    financeAPI.delletesendBack(sendBack.id).then(response =>{
                        //console.log("success!")
                        if (response.msg=='success') { //判断当前操作是否成功
                            this.$message.success("删除成功！");
                        } else {
                            this.$message.error("数据同步失败,自动刷新");
                        }
                    }).finally(() => {
                        //2.重新加载数据
                        this.getsendBackList();
                    });
                }).catch(() => {
                    this.$message.info("取消操作");
                });
            },

            //弹出编辑窗口
            handleUpdate(sendBack) {    //20240510
            // 提交请求给后台   role.roleId
            financeAPI.getsendBackById(id).then(response =>{
            if (response.msg === 'success' && response.data != null) {
                     this.dialogFormVisible = true;
                     this.formData = response.data;
                    } else {
                        this.$message.error("数据同步失败,自动刷新");
                    }
                }).finally(() => {
                    //2.重新加载数据
                    this.getsendBackList();
                });  
          
            },
                
            //修改
            handleEdit() {
                //发送异步请求
                financeAPI.updatesendBack(this.formData).then(response =>{
                  
                    if (response.msg === 'success') { //判断当前操作是否成功
                        //1.关闭弹层
                        this.dialogFormVisible = false;
                        this.$message.success("修改成功！");
                    } else {
                        this.$message.error("修改失败");
                    }
                }).finally(() => {
                    //2.重新加载数据
                    this.getsendBackList();
                });
            },
            //查询所有
            getsendBackList(){
                financeAPI.getsendBack(this.searchModel).then(response=>{ 
                    this.dataList=response.data.rows;
                    this.total=response.data.total;
            });
           },
           //分页
           handleSizeChange(pageSize){
            this.searchModel.pageSize=pageSize
            this.getsendBackList();
           },
           handleCurrentChange(pageNo){
            this.searchModel.pageNo=pageNo
            this.getsendBackList();
           },
          
            //弹出添加窗口
            openEditUI(id) {
                if( id==null){
                this.title='新增角色'
                }else{
                    this.title='修改角色'
                    //根据id查找角色
                    financeAPI.getsendBackById(id).then(response=>{ 
                        console.log(response);
                        this.formData=response.data
                        
                        });
                } 
                this.dialogFormVisible = true;
                this.clearForm(); // 清空表单数据
            },
            //取消
            cancel() {
                this.dialogFormVisible = false;
                this.$message.success("操作取消！");
            },
           

            //重置表单
            clearForm() {
                this.formData = {};
                this.$refs.sendFormRef.clearValidate();    
            },
            //下载模板文件
            downloadTemplate(){
                    window.location.href="../templates/upload.xlsx";
                },
        },
        
        //钩子函数，VUE对象初始化完成后自动执行
        created(){
            this.getsendBackList();
            
        }
};
</script>
<style>
#search .el-input__inner {
    width: 200px;
    margin-right: 10px;
}
</style>
